<template>
	<div :class="curClassName" :style="curStyle" @click="handleClick">
        <span class="view__caption__info">
            <slot></slot>
        </span>
	</div>
</template>
<script setup lang="ts">
import { IEvent } from '@/core';
import { PresetCaptionProps } from './preset-caption';

const props = defineProps(PresetCaptionProps);
interface PresetCaptionEmit {
	(name: 'component-action', value: IEvent<string>): void;
}
const emit = defineEmits<PresetCaptionEmit>();
/**
 * 项名称
 *
 * @memberof AppPresetCaption
 */
const itemName = computed(() => {
	return props.index || props.index === 0
		? `${props.name}_${props.index}`
		: props.name;
});

/**
 * 绘制模式
 *
 * @memberof AppPresetCaption
 */
const renderMode = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.renderMode == 'HEADING1'
			? 'TEXT'
			: layoutModel.renderMode;
	}
});

/**
 * 当前容器样式类
 *
 * @memberof AppPresetCaption
 */
const curClassName = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	const classNames = {
		'app-preset-caption': true,
	};
	if (layoutModel) {
		Object.assign(classNames, layoutModel.getClassNames());
	}
	return classNames;
});

/**
 * 当前容器样式
 *
 * @memberof AppPresetCaption
 */
const curStyle = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.getElementStyle();
	}
});

/**
 * 当前容器样式
 * @param $event
 * @memberof AppPresetCaption
 */
const handleClick = ($event: any) => {
	emit('component-action', {
		name: props.name,
		action: 'panelItemClick',
		data: $event,
	});
};
</script>
